<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/12/26 0026
  Time: 10:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/commons/global.jsp" %>
<html>
<head>
    <%@ include file="/commons/basejs.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>产品规格</title>
    <script type="text/javascript">
        function formatterImg(value) {
            if (value != null) {
                return '<img height="40px"  src="' + value + '" alt="" />';
            } else {
                return '';
            }
        }
        //扩展的Date的format方法(上述插件实现) 日期转换格式
        Date.prototype.format = function (format) {
            var o = {
                "M+": this.getMonth() + 1, // month
                "d+": this.getDate(), // day
                "h+": this.getHours(), // hour
                "m+": this.getMinutes(), // minute
                "s+": this.getSeconds(), // second
                "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
                "S": this.getMilliseconds()
                // millisecond
            }
            if (/(y+)/.test(format))
                format = format.replace(RegExp.$1, (this.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(format))
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
            return format;
        }
        //调用日期转化格式方法
        function formatDatebox(value) {

            if (value == null || value == '') {
                return '';
            }
            var dt;
            if (value instanceof Date) {
                dt = value;
            } else {
                dt = new Date(value);
            }

            return dt.format("yyyy-MM-dd hh:mm:ss");
        }

    </script>
</head>
<body>
<div class="easyui-layout" fit="true">
    <!--产品列表-->
    <div data-options="region:'west',split:true,border:false" title="产品列表" style="width:45%;">
        <table id="product_datagrid" class="easyui-datagrid"
               data-options="
		   		url:'${path}/productSpecification/productList.do',
		   		fit:true,
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#product_tools',
		   		pagination:true,
		   		singleSelect:true,
		   		onClickRow:function(index, row){
		   			getProductSpecification(row.id);
		   		}
		   		">
            <thead>
            <th data-options="field:'id'">ID</th>
            <th data-options="field:'productName',width:100">产品名称</th>
            <th data-options="field:'productImg',width:200,formatter:formatterImg">产品图片</th>
            <th data-options="field:'sellerName',width:200">商家名称</th>
            <th data-options="field:'type',width:200,formatter:function(value){
             if(value==0){
             return '体检套餐';
             }else if(value==1){
                return '线上体检卡';
                }else if(value==2){
                return '线下体检卡';
                }else if(value==3){
                return '邮寄产品';
                }
             }">产品类型
            </th>
            </thead>
        </table>
        <div id="product_tools">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'"
               onclick="$('#product_datagrid').datagrid('reload') ">刷新</a>
            <label>关键词:</label>
            <input class="easyui-searchbox" data-options="prompt:'请输入产品名称|商家名称',searcher:doProductSearch"
                   style="width:220px;"/>
        </div>
    </div>
    <!--end-->
    <script>
        //联动处理productId处理规格列表
        function getProductSpecification(productId) {
            $("#productSpecification_datagrid").datagrid('clearSelections');
            var queryParams = {};
            queryParams.productId = productId;
            var options = $("#productSpecification_datagrid").datagrid('getPager').data("pagination").options;
            options.pageNumber = 1;
            //重新加载
            $("#productSpecification_datagrid").datagrid('options').url = "${path}/productSpecification/productSpecificationList.do";
            $("#productSpecification_datagrid").datagrid('options').queryParams = queryParams;
            $("#productSpecification_datagrid").datagrid('reload');
        }

        //查询
        function doProductSearch(val) {
            var queryParams = {};
            queryParams.keyWord = val;
            var options = $("#product_datagrid").datagrid('getPager').data("pagination").options;
            options.pageNumber = 1;
            //重新加载
            $("#product_datagrid").datagrid('options').url = "${path}/productSpecification/productList.do";
            $("#product_datagrid").datagrid('options').queryParams = queryParams;
            $("#product_datagrid").datagrid('reload');
        }
    </script>
    <!--规格列表-->
    <div data-options="region:'center',split:true,border:false" title="规格列表" style="width:55%;">
        <table id="productSpecification_datagrid" class="easyui-datagrid"
               data-options="
		   		fit:true,
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#productSpecification_tools',
		   		pagination:true,
		   		singleSelect:true,
		   	">
            <thead>
            <th data-options="field:'id'">ID</th>
            <th data-options="field:'name',width:100">规格名称</th>
            <th data-options="field:'productId'">产品ID</th>
            <th data-options="field:'price',width:100">价格</th>
            <th data-options="field:'logo',width:100,formatter:formatterImg">规格logo</th>
            <th data-options="field:'repertory',width:50">库存</th>
            <th data-options="field:'soldOutCount',width:50">销售数量</th>
            <th data-options="field:'ord',width:50">排序</th>
            <th data-options="field:'createTime',width:80,formatter:formatDatebox">创建时间</th>
            </thead>
        </table>
        <div id="productSpecification_tools">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'"
               onclick="$('#productSpecification_datagrid').datagrid('reload') ">刷新</a>

            <shiro:hasPermission name="/productSpecification/add.do">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'"
                   onclick="openEditProductSpecificationBox('add')">添加</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/productSpecification/edit.do">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'"
                   onclick="openEditProductSpecificationBox('update')">修改</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/productSpecification/delete.do">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'"
                   onclick="deleteProductSpecification()">删除</a>
            </shiro:hasPermission>
        </div>
        <!--添加弹窗-->
        <style type="text/css">

            .grid {
                font: 12px arial, helvetica, sans-serif;
                border: 0px solid #8DB2E3
            }

            .grid td {
                font: 100% arial, helvetica, sans-serif;
                height: 40px;
                padding: 5px
            }

            .grid {
                width: 100%;
                border-collapse: collapse
            }

            .grid td {
                border: 1px solid #e0e0e0;
                padding-left: 5px
            }

        </style>
        <div class="easyui-dialog" id="edit_productSpecification_dialog" title="添加规格"
             data-options="closed:true,modal:true,width:500,height:450">
            <form id="edit_productSpecification_form" method="post">
                <table class="grid" align="center" style="margin-top: 40px">
                    <input type="hidden" name="id" id="edit-id-input"/>
                    <input type="hidden" id="productId" name="productId" value=""/>
                    <tr>
                        <td colspan="3" style="text-align: center"><h2>规格</h2></td>
                    </tr>
                    <tr>
                        <td>
                            <lable for="name">规格名称:</lable>
                        </td>
                        <td>
                            <input class="easyui-validatebox" name="name" data-options="required:true"
                                   style="width:200px;"/>
                        </td>
                        <td> 图片预览:</td>
                    </tr>
                    <tr>
                        <td>
                            <lable for="code">价格:</lable>
                        </td>
                        <td>
                            <input class="easyui-validatebox" name="price" data-options="required:true"
                                   style="width:200px;"/>
                        </td>
                        <td rowspan="2"><img height="60px" src="" id="tpyl"/></td>

                    </tr>
                    <tr>
                        <td>
                            <lable for="type">库存:</lable>
                        </td>
                        <td>
                            <input class="easyui-validatebox" name="repertory"
                                   onkeyup="this.value=this.value.replace(/\D/g,'')"
                                   onafterpaste="this.value=this.value.replace(/\D/g,'')" data-options="required:true"
                                   style="width:200px;"/>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <div id="upload"></div>
                            规格图片
                        </td>
                        <td><input class="easyui-validatebox" readonly="readonly" type="text" id="logo" name="logo"
                                   style="width:200px;"/></td>
                        <td><a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-edit'"
                               onclick="upImage();">上传图片</a></td>
                        <script type="text/javascript">

                            var _editor;
                            $(function () {
                                //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
                                _editor = UE.getEditor('upload', {
                                    serverUrl: "${path}/file/upload.do?compress=1"
                                });

                                _editor.ready(function () {
                                    //设置编辑器不可用
                                    // _editor.setDisabled();
                                    //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                                    _editor.hide();
                                    //侦听图片上传
                                    _editor.addListener('beforeInsertImage', function (t, arg) {
                                        //有多少张图片arg.length就是多大
                                        $("#logo").val(arg[0].src);
                                        $("#tpyl").attr("src", arg[0].src);

                                    });
                                });
                            });
                            //弹出图片上传的对话框
                            function upImage() {
                                var myImage = _editor.getDialog("insertimage");
                                myImage.open();
                            }
                        </script>
                    </tr>
                    <tr>
                        <td>
                            <lable for="ord">排序:</lable>
                        </td>
                        <td>
                            <input class="easyui-validatebox" name="ord"
                                   onkeyup="this.value=this.value.replace(/\D/g,'')"
                                   onafterpaste="this.value=this.value.replace(/\D/g,'')" data-options="required:true"
                                   style="width:200px;"/>
                        </td>
                        <td rowspan="2"></td>
                    </tr>

                </table>
                <div style="margin-top:40px;text-align: center">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'"
                       onclick="editpProductSpecification()">保存</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'"
                       onclick="$('#edit_productSpecification_dialog').dialog('close')">取消</a>
                </div>
            </form>
        </div>

    </div>
</div>
<script>
    var flag = "add"
    //添加和修改
    function openEditProductSpecificationBox(str) {
        var rowsData_product = $("#product_datagrid").datagrid("getSelected");//找到所有选中的行
        if (rowsData_product == null) {
            $.messager.alert("提示", "请选择一个产品", "info");
            return;
        }
        $("#edit_productSpecification_form").form("clear");
        if (str == "update") {
            flag = str;
            var rowsData = $("#productSpecification_datagrid").datagrid("getSelected");//找到所有选中的行
            if (rowsData == null) {
                $.messager.alert("提示", "请选择一个规格", "info");
                return;
            }
            $("#edit_productSpecification_dialog").dialog({title: "修改规格"});
            $("#edit_productSpecification_dialog").form("load", rowsData);
            $("#tpyl").attr("src", rowsData.logo);
            $("#productId").val(rowsData_product.id);
        } else {
            flag = str;
            $("#productId").val(rowsData_product.id);
        }
        $("#edit_productSpecification_dialog").dialog("open");
    }
    //保存
    function editpProductSpecification() {
        $.messager.progress();
        var url = "";
        var str = "";
        if (flag == 'add') {
            url = "${path}/productSpecification/add.do";
            str = "添加";
        } else if (flag == 'update') {
            url = "${path}/productSpecification/edit.do";
            str = "修改";
        }
        $("#edit_productSpecification_form").form("submit", {
            url: url,
            onSubmit: function () {
                var valid = $(this).form("validate");
                if (!valid) {
                    $.messager.progress("close");
                }
                return valid;
            },
            success: function (data) {
                data = $.parseJSON(data);
                $.messager.progress("close");
                if (data.success) {
                    $("#edit_productSpecification_dialog").dialog("close");
                    $.messager.show({
                        title: str + "成功", msg: str + "成功!",
                        timeout: 600, style: "left:30%;top:10%",
                        showType: "fade"
                    });
                    $("#productSpecification_datagrid").datagrid("reload");
                } else {
                    $.messager.alert(str + "失败", data.msg, "error");
                }
            }
        });
    }

    //删除
    function deleteProductSpecification() {
        var rowsData_product = $("#product_datagrid").datagrid("getSelected");//找到所有选中的行
        if (rowsData_product == null) {
            $.messager.alert("提示", "请选择一个产品", "info");
            return;
        }
        var rowsData = $("#productSpecification_datagrid").datagrid("getSelected");//找到所有选中的行
        if (rowsData == null) {
            $.messager.alert("提示", "请选择一个规格", "info");
            return;
        }
        $.messager.confirm("确认", "确定要删除该规格吗?", function (yes) {
            if (yes) {
                $.messager.progress();
                $.ajax({
                    url: "${path}/productSpecification/delete.do",
                    type: "post",
                    data: {id: rowsData.id},
                    dataType: "json",
                    success: function (data) {
                        $.messager.progress("close");
                        if (data.success) {
                            $.messager.show({
                                title: "删除成功",
                                msg: "删除成功!",
                                timeout: 600,
                                style: "left:30%;top:10%",
                                showType: "fade"
                            });
                            $("#productSpecification_datagrid").datagrid("reload");
                        } else {
                            $.messager.alert("删除失败", data.msg, "error");
                        }
                    },
                    error: function () {
                        $.messager.progress("close");
                        $.messager.alert("删除失败", "服务器连接失败!", "error");
                    }
                });
            }
        });
    }

</script>
</body>
</html>
